<template>
    <div>
        <div class="left">
            <h3>{{systemName}}</h3>
            <hr>
            <ul >
                <li v-for="list in lists" @click="getMdContent(list)">
                    <a>{{list | deleteMd}}</a>
                </li>
            </ul>
        </div>
        <div class="mdContent" >
            <div class="version" v-if="docId != ''">
                <span>历史版本：</span>
                <select v-model="docId" v-on:change="getMdContentById">
                    <option v-for="list in versionLists" v-bind:value="list.key" >{{list.timestamp | showTime}}</option>
                </select>
            </div>
            <div v-html="content"></div>
        </div>
    </div>  
</template>
<script>
    import marked from 'marked'

    export default {
        data() {
            return {
                content: '',
                lists: [],
                versionLists: [],
                systemName: this.$route.params.url + '系统文档',
                docId: ''
            }
        },
        filters: {
            showTime(value) {
                value = String(value).substring(0, 10)
                var tt = new Date(parseInt(value) * 1000).toLocaleString().replace(/年|月/g, "-").replace(/日/g, " ")
                return tt
            },
            deleteMd(value) {
                var index = value.indexOf('.')
                value = value.substring(0, index)
                return value
            }
        },
        methods: {
            markDown() {
                var rendererMD = new marked.Renderer();
                marked.setOptions({
                    renderer: rendererMD,
                    gfm: true,
                    tables: true,
                    breaks: false,
                    pedantic: false,
                    sanitize: false,
                    smartLists: true,
                    smartypants: false
                }); //基本设置
                var s = this.content
                this.content = marked(s)
            },
            getMenu() {
                var _this = this
                $.ajax({
                    type: 'POST',
                    url: 'http://192.168.1.66:5000/nav/get',
                    data: {},
                    dataType: 'json',
                    async: false,
                    crossDomain: true,
                    error: function(request) {
                        _this.$store.commit('showModal','连接错误')
                    },
                    success: function(retdata) {
                        var lists = []
                        for (var i = 0; i < retdata.data.length; i++) {
                            if (retdata.data[i].subDirname == _this.$route.params.url) {
                                lists = retdata.data[i].files
                            }
                        }
                        // lists.splice(0, 1)
                        _this.lists = lists
                    }
                });
            },
            getMdContent(list) {
                var _this = this
                var docname = this.$route.params.url + '/' + list
                $.ajax({
                    type: 'POST',
                    url: 'http://192.168.1.66:5000/nav/getmdlist',
                    data: {
                        'docname': docname
                    },
                    dataType: 'json',
                    async: false,
                    crossDomain: true,
                    error: function(request) {
                        _this.$store.commit('showModal','连接错误')
                    },
                    success: function(retdata) {
                        _this.content = retdata.data[retdata.data.length - 1].text
                        _this.docId = retdata.data[retdata.data.length - 1].key
                        _this.versionLists = retdata.data
                        _this.markDown()
                    }
                });
            },
            getMdContentById() {
                var _this = this
                $.ajax({
                    type: 'POST',
                    url: 'http://192.168.1.66:5000/nav/getmd',
                    data: {
                        'docid': _this.docId
                    },
                    dataType: 'json',
                    async: false,
                    crossDomain: true,
                    error: function(request) {
                        _this.$store.commit('showModal','连接错误')
                    },
                    success: function(retdata) {
                        _this.content = retdata.data.text
                        _this.markDown()
                    }
                });
            }
        },
        mounted() {
            this.$nextTick(function() {

                this.getMenu()
                this.markDown()
            })
        }
    }
</script>
<style>
    .left {
        min-height: 100%;
        background-color: #222d32;
        width: 240px;
        position: fixed;
        top: 0;
        z-index: 810;
        float: left;
        color: #b8c7ce
    }
    
    .left ul {
        float: left;
        list-style: none;
        padding: 5px 20px;
        text-align: left;
        font-size: 16px;
        color: #b8c7ce
    }
    
    .mdContent {
        background-color: #fff;
        margin-left: 240px;
        text-align: left;
        padding: 20px 40px;
    }
    
    .version {
        float: right
    }
</style>